<template>
        <div class="box-header">
            <div style="font-size:3rem;margin-right: 20px;font-weight: bold">新闻公告</div>
        </div>
        <el-divider/>
        <div class="news-box" v-for="(item, index) in data.note" :key="index">
            <div class="news-title" @click="goToDetail(item.id)">
                 {{item.newsTitle}}
            </div>
            <el-divider/>
        </div>
        <el-image src="https://static.17k.com/pic/fuli.png?v=2" style="width: 300px;height: 180px"></el-image>
</template>
<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import {useRouter} from "vue-router";
const router = useRouter();
const data = reactive({
    note: []})
//获取新闻
request.get('/api/news/getNews').then(res => {
    if(res.code === 200){
        data.note = res.data
        console.log("获取新闻成功",res.data)}
    else
        console.error("获取新闻失败",res.message)
}).catch(err => {
    console.error("请求出错",err)
})
// 跳转至详情页的方法
const goToDetail = (id) => {
    // 通过路由跳转，携带当前新闻的id
    router.push({
        name: 'NewsDetail', // 对应路由配置中的name
        params: { id } // 传递id参数
    });
};
</script>
<style scoped>
.page{
    width: 100%;
    height: 100%;
}

.news-box{
    /* 核心样式：一行显示，超出省略 */
    white-space: nowrap; /* 强制文字在一行显示，不换行 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 超出部分显示省略号（...） */
    /* 可选：设置容器宽度（根据布局调整） */
    width: 100%;
    font-size: 1rem;
    color: #333;
    /*line-height: 15px;*/
    height: 55px;
}
.news-title:hover{
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #f5f5f5;
}
</style>